<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        #app {
            text-align: center;
        }
        #loginForm, #registerForm {
            background-color: #ADD8E6;
            width: 300px;
            margin: 200px auto;
            padding: 20px;
            border-radius: 10px;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="loginForm" v-if="!isLogin && !isRegister">
        <h1>用户登录</h1>
        <div>用户名:<input type="text" v-model="loginYhm" /></div>
        <div class="error" v-if="loginErrors.yhm">{{ loginErrors.yhm }}</div>
        <div>密码:<input type="password" v-model="loginMm" /></div>
        <div class="error" v-if="loginErrors.mm">{{ loginErrors.mm }}</div>
        <div><button @click="login">登录</button></div>
        <div><button @click="showRegister">注册</button></div>
    </div>
    <div id="registerForm" v-else-if="!isLogin && isRegister">
        <h1>用户注册</h1>
        <div>用户名:<input type="text" v-model="yhm" /></div>
        <div class="error" v-if="errors.yhm">{{ errors.yhm }}</div>
        <div>密码:<input type="password" v-model="mm" /></div>
        <div class="error" v-if="errors.mm">{{ errors.mm }}</div>
        <div>重复密码:<input type="password" v-model="cfmm" /></div>
        <div class="error" v-if="errors.cfmm">{{ errors.cfmm }}</div>
        <div>
            用户性别:
            <input type="radio" v-model="gender" value="1" />男
            <input type="radio" v-model="gender" value="2" />女
            <br />
        </div>
        <div>
            年龄:<input type="text" v-model="nl" />
            <div class="error" v-if="errors.nl">{{ errors.nl }}</div>
        </div>
        <div>
            爱好:
            <input type="checkbox" value="听音乐" v-model="likes" />听音乐
            <input type="checkbox" value="唱歌" v-model="likes" />唱歌
            <input type="checkbox" value="打游戏" v-model="likes" />打游戏
            <input type="checkbox" value="看电影" v-model="likes" />看电影
            <br />
        </div>
        <div>
            学历:
            <select v-model="school">
                <option disabled value="">请选择你的学历</option>
                <option>小学</option>
                <option>初中</option>
                <option>高中</option>
                <option>大学</option>
            </select>
            <div class="error" v-if="errors.school">{{ errors.school }}</div>
        </div>
        <div>
            用户简介:
            <textarea v-model="yhjj" rows="10" cols="40"></textarea>
            <br />
        </div>
        <div>
            同意协议:
            <input type="checkbox" v-model="agree" />
            <div class="error" v-if="errors.agree">{{ errors.agree }}</div>
        </div>
        <div><button @click="zc">注册</button></div>
        <div><button @click="showLogin">登录</button></div>
    </div>
    <div v-else>
        <h1>欢迎，{{ yhm }}！</h1>
        <div><button @click="loginOut">登出</button></div>
    </div>
</div>
<script>
    var app = Vue.createApp({
        data() {
            return {
                yhm: '',
                mm: '',
                cfmm: '',
                isLogin: false,
                isRegister: true,
                gender: '',
                likes: [],
                school: '',
                yhjj: '',
                agree: false,
                errors: {},
                loginYhm: '',
                loginMm: '',
                loginErrors: {}
            }
        },
        methods: {
            zc() {
                this.errors = {};
                if (this.yhm.trim() === '') {
                    this.errors.yhm = '用户名不能为空';
                }
                if (this.mm.length < 6) {
                    this.errors.mm = '密码长度至少为6位';
                }
                if (this.cfmm !== this.mm) {
                    this.errors.cfmm = '两次输入的密码不一致';
                }
                if (this.nl.trim() === '' || isNaN(this.nl)) {
                    this.errors.nl = '请输入有效的年龄';
                }
                if (this.school === '') {
                    this.errors.school = '请选择学历';
                }
                if (!this.agree) {
                    this.errors.agree = '请同意协议';
                }
    
                if (Object.keys(this.errors).length === 0) {
                    alert("注册成功");
                    this.isLogin = true;
                } else {
                    console.log("注册失败", this.errors);
                }
            },
            login() {
                this.loginErrors = {};
                if (this.loginYhm.trim() === '') {
                    this.loginErrors.yhm = '用户名不能为空';
                }
                if (this.loginMm.length < 6) {
                    this.loginErrors.mm = '密码长度至少为6位';
                }
    
                if (Object.keys(this.loginErrors).length === 0) {
                    alert("登录成功");
                    this.isLogin = true;
                    this.yhm = this.loginYhm;
                } else {
                    console.log("登录失败", this.loginErrors);
                }
            },
            loginOut() {
                this.isLogin = false;
                this.yhm = '';
                this.mm = '';
                this.cfmm = '';
                this.gender = '';
                this.likes = [];
                this.school = '';
                this.yhjj = '';
                this.agree = false;
                this.loginYhm = '';
                this.loginMm = '';
                this.showLogin();
            },
            showLogin() {
                this.isRegister = false;
            },
            showRegister() {
                this.isRegister = true;
            }
        }
    });
    
    var vm = app.mount("#app");

    
</script>
</body>
</html>